<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const canvas = document.createElement("canvas");
        canvas.width = 600;
        canvas.height = 600;
        document.body.appendChild(canvas);
        let context =  canvas.getContext("2d");
        const grdient = context.createLinearGradient(30,30,200,200)
        grdient.addColorStop(0,'red')
        grdient.addColorStop(1,'blue')
        context.fillStyle = grdient
        context.fillRect(30,30,200,200)
        context.stroke()
    </script>
</script>
  </body>
</html>
